<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>grey demo page</title>
	<script src="external/jquery/jquery.js"></script>
	<script src="external/jquery/jquery.cookie.js"></script>
	<script>
		function deleteAllCookies() {
			if(!document.cookie){
				return;
			}
		    var cookies = document.cookie.split(";");
		
		    for (var i = 0; i < cookies.length; i++) {
		        var cookie = cookies[i];
		        var eqPos = cookie.indexOf("=");
		        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
		        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
		    }
		}
	
		$(document).ready(function(){
			//case 1
			$("#httpVersion1Prod").click(function(){
				deleteAllCookies();
				$.ajax({url:"/httpGrey.do?version=10",success:function(result){
					$("#httpVersion1Resp").html(result);
				},error:function(x,textStatus){
					$("#httpVersion1Resp").html(textStatus);
				}});
			});
			
			$("#httpVersion1Grey").click(function(){
				deleteAllCookies();
				$.ajax({url:"/httpGrey.do?version=1",success:function(result){
					$("#httpVersion1Resp").html(result);
				},error:function(x,textStatus){
					$("#httpVersion1Resp").html(textStatus);
				}});
			});
			
			//case 2
			$("#case2Prod").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?version=10&name=xiaoming",success:function(result){
					$("#case2Resp").html(result);
				},error:function(x,textStatus){
					$("#case2Resp").html(textStatus);
				}});
			});
			
			$("#case2Grey").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?version=1&name=xiaoming",success:function(result){
					$("#case2Resp").html(result);
				},error:function(x,textStatus){
					$("#case2Resp").html(textStatus);
				}});
			});
			
			//case 3
			$("#case3Prod").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?version=anyThing&name=xiaoming",success:function(result){
					$("#case3Resp").html(result);
				},error:function(x,textStatus){
					$("#case3Resp").html(textStatus);
				}});
			});
			
			$("#case3Grey").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?version=grey&name=xiaoming",success:function(result){
					$("#case3Resp").html(result);
				},error:function(x,textStatus){
					$("#case3Resp").html(textStatus);
				}});
			});
			
			//case 4
			$("#case4Prod").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?name=xiaoming",
					beforeSend: function(xhr){xhr.setRequestHeader('version', 'anyThing');},
					success:function(result){
						$("#case4Resp").html(result);
				},error:function(x,textStatus){
					$("#case4Resp").html(textStatus);
				}});
			});
			
			$("#case4Grey").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?name=xiaoming",
					beforeSend: function(xhr){xhr.setRequestHeader('version', 'grey');},
					success:function(result){
						$("#case4Resp").html(result);
				},error:function(x,textStatus){
					$("#case4Resp").html(textStatus);
				}});
			});
			
			//case 5
			$("#case5Prod").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?name=xiaoming",
					beforeSend: function(xhr){$.cookie('versionId', 'prod');},
					success:function(result){
						$("#case5Resp").html(result);
				},error:function(x,textStatus){
					$("#case5Resp").html(textStatus);
				}});
			});
			
			$("#case5Grey").click(function(){
				deleteAllCookies();
				$.ajax({url:"/index.do?name=xiaoming",
					beforeSend: function(xhr){$.cookie('versionId', 'grey');},
					success:function(result){
						$("#case5Resp").html(result);
				},error:function(x,textStatus){
					$("#case5Resp").html(textStatus);
				}});
			});
			
			//case 6
			$("#case6Button").click(function(){
				var url = $("input[name=url]").val();
				var urlParam = $("input[name=urlParam]").val();
				var cookies = $("input[name=cookieParam]").val();
				var header = $("input[name=headerParam]").val();
				$.ajax({url:url + "?" + urlParam,
					beforeSend: function(xhr){
						document.cookie = cookies;
						if(header && header.length > 0 && header.indexOf("=") > 0){
							headers = header.split('=')
							xhr.setRequestHeader(headers[0], headers[1]);
						}
					},
					success:function(result){
						$("#case6Resp").html(result);
				},error:function(x,textStatus){
					$("#case6Resp").html(textStatus);
				}});
			});
		});
	</script>
</head>
<body>
<h1>Welcome to grey demo!</h1>

<div class="case">
	<h3>Http测试案例1</h3>
	<div class="">仅触发http请求，请设置规则'URL参数，参数名version，按100取模 = 1‘</div>
	<button id="httpVersion1Prod" class="prod">触发到生产的请求,参数version != 1</button>
	<button id="httpVersion1Grey" class="grey">触发到灰度的请求,参数version = 1</button>
	<div>
		<div>响应内容</div>
		<div id="httpVersion1Resp" class="resp"></div>
	</div>
</div>

<div class="case">
	<h3>Http + HSF测试案例1</h3>
	<div class="">触发http请求，后端触发HSF请求，请设置规则'URL参数，参数名version，按100取模 = 1‘</div>
	<button id="case2Prod" class="prod">触发到生产的请求,参数version != 1</button>
	<button id="case2Grey" class="grey">触发到灰度的请求,参数version = 1</button>
	<div>
		<div>响应内容</div>
		<div id="case2Resp" class="resp"></div>
	</div>
</div>

<div class="case">
	<h3>Http + HSF， URL参数 + 白名单测试案例</h3>
	<div class="">触发http请求，后端触发HSF请求，请设置规则'URL参数，参数名version，白名单取值grey‘</div>
	<button id="case3Prod" class="prod">触发到生产的请求,参数version不为grey</button>
	<button id="case3Grey" class="grey">触发到灰度的请求,参数version为grey</button>
	<div>
		<div>响应内容</div>
		<div id="case3Resp" class="resp"></div>
	</div>
</div>

<div class="case">
	<h3>Http + HSF， HttpHeader + 白名单测试案例</h3>
	<div class="">触发http请求，后端触发HSF请求，请设置规则'HTTP Header，参数名version，白名单取值grey‘</div>
	<button id="case4Prod" class="prod">触发到生产的请求,参数version不为grey</button>
	<button id="case4Grey" class="grey">触发到灰度的请求,参数version为grey</button>
	<div>
		<div>响应内容</div>
		<div id="case4Resp" class="resp"></div>
	</div>
</div>

<div class="case">
	<h3>Http + HSF，Cookie + 白名单测试案例</h3>
	<div class="">触发http请求，后端触发HSF请求，请设置规则'Cookie，参数名versionId(<span class="highlight">注意version为cookie关键字，不能用version作为cookie名称</span>)，白名单取值grey‘</div>
	<button id="case5Prod" class="prod">触发到生产的请求,参数versionId不为grey</button>
	<button id="case5Grey" class="grey">触发到灰度的请求,参数versionId为grey</button>
	<div>
		<div>响应内容</div>
		<div id="case5Resp" class="resp"></div>
	</div>
</div>

<div class="case">
	<h3>任意触发</h3>
	URL：<input type="input" name="url" value="/index.do"/>
	URL参数：<input type="input" name="urlParam" value="version=1"/>
	Header:：<input type="input" name="headerParam" value="version=1"/>
	Cookie:：<input type="input" name="cookieParam" value="versionId=1"/> 
	<button id="case6Button" class="prod">触发请求</button>
	<div>
		<div>响应内容</div>
		<div id="case6Resp" class="resp"></div>
	</div>
</div>

<style>
	.case{
		border:1px solid grey;
		padding:10px;
	}
	.resp{
		padding:10px;
	}
	.highlight{
		color:red;
	}
	button{
		width:300px;
		height:30px;
	}
	button.prod{
		background-color: rgba(50, 115, 220, 0.3);
	}
</style>
</body>
</html>
